<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>发布文章_陈恢严个人博客</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/asset/images/favicon.ico" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
  <!-- 加载特效插件start -->
  <link href="/asset/css/loading.css" rel="stylesheet">
  <!-- 加载特效插件end -->
  <script type="text/javascript" src="/asset/js/comm.js"></script>
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <script type="text/javascript" src="/asset/js/vue.min.js"></script>
  <!-- wangEditor 富文本编辑器js start -->
  <script type="text/javascript" src="/asset/wangEditor/wangEditor.js"></script>
  <!-- wangEditor 富文本编辑器js end -->
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->
  <style>
    nav ul li a[href='/myArticle/sendArticle']{color: #f7ffb4; /*background: #176c86;*/
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    }
    .layuimini-form .layui-form-item label{ line-height: 40px; text-align: right; padding-right: 10px;}
    .w-e-text-container{ min-height: 570px !important;}
    #article_image{ max-height: 300px; max-width: 150px;}
  </style>
</head>
<body>
  <div class="box-bg">
    <div class="stars"></div>  <!--背景层，不要删除，不然没有作用-->
  </div>
  <div id="sendArticle">
    <header>
      <div class="profile">
        <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
        <div class="guanzhu fl">
          <ul>
            <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
            <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
            <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
            <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
          </ul>
        </div>

        <!-- 加载提示start -->
        <div class="loading-div" v-if="!isLoad_1">
          <div class="loader">
            <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
          </div>
        </div>
        <!-- 加载提示end -->

        <!-- 标题 -->
        <div class="username" v-html="logoTitle.content"></div>
      </div>

      <!-- 菜单start -->
      <nav>
        <ul id="starlist">
          <li v-for="(item, index) in sysMenuList" :key="item.id">
            <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
            <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.location.href  = '/blogSpace';" v-text="item.name"></a>
          </li>
        </ul>
      </nav>
      <!-- 菜单end -->
    </header>
    <article>
      <main class="comment_box">
        <div class="newsview comment_comtent">
          <!-- 发布start -->
          <div class="news_pl">
            <h2><strong>发布</strong></h2>
            <div class="gbko" style="margin-top:20px;">
              <div class="layui-form layuimini-form">
                  <div class="layui-form-item layui-row">
                      <label class="layui-col-sm1">发布人</label>
                      <div class="layui-col-sm11">
                          <input type="text" v-model="articleForm.userName" placeholder="发布人昵称" class="layui-input">
                      </div>
                  </div>
                <div class="layui-form-item layui-row">
                  <label class="layui-col-sm1 required">文章标题</label>
                  <div class="layui-col-sm11">
                    <input type="text" v-model="articleForm.title" placeholder="请输入标题" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item layui-row">
                  <label class="layui-col-sm1 required">文章封面图</label>
                  <div class="layui-upload layui-col-sm11">
                    <button type="button" class="layui-btn" id="imgBtn">上传图片</button>
                    <div class="layui-upload-list update_list">
                      <img class="layui-upload-img" id="article_image" src="/article_image/article_image.jpg">
                      <p id="article_image_text"></p>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item layui-form-text layui-row">
                  <label class="layui-col-sm1">备注</label>
                  <div class="layui-col-sm11">
                    <textarea v-model="articleForm.remark" placeholder="备注" class="layui-textarea"></textarea>
                  </div>
                </div>
                <div class="layui-form-item layui-row">
                  <label class="layui-col-sm1 required">标签</label>
                  <div class="layui-col-sm11">
                      <input type="checkbox" v-for="(item, index) in tagList" :key="item.id" name="boTagArr" v-bind:value="item.id" v-bind:title="item.name">
                      <input type="hidden" v-model="articleForm.boTagArr">
                  </div>
                </div>
                <div class="layui-form-item layui-row">
                  <label class="layui-col-sm1 required">内容</label>
                  <div class="layui-col-sm11">
                    <div id="editorContent" style="min-height:600px"></div>
                    <input type="hidden" v-model="articleForm.content">
                  </div>
                </div>
                <div class="layui-form-item" style="text-align: right;">
                  <div>
                    <button class="layui-btn layui-btn-normal" v-on:click="save">保存</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 发布end -->
        </div>
      </main>
    </article>
    <footer>
      <p v-html="indexFooter.content"></p>
    </footer>
    <a href="#" class="cd-top">Top</a>
  </div>
</body>
<script type="text/javascript">

  //初始化layui模块
  layui.use('layer', function(){
    var layer = layui.layer;
  });

  var sendArticle = new Vue({
    el: '#sendArticle',
    data: function () {
      return {
        serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
        isLoad_1: false, //请求1完成标记
        isLoad_2: false, //请求2完成标记
        sysMenuList: [], //导航
        logoTitle: [], //LOGO标题
        indexFooter: [], //页脚
        tagList: [], //标签列表
        editor: [], //编辑器
        articleForm: {
          userName: '',
          title: '',
          img: 'article_image.jpg',
          remark: '',
          boTagArr: '',
          content: '',
          imgName: [], //保存编辑器上传的图片名，用于记录相应的文章图片
          imgSize: [], //保存编辑器上传的图片对应的大小
        }
      }
    },
    created: function () {
      const me = this;
      me.$nextTick(function () {
        me.getSendArticleData();
        me.uploadInst(); //初始封面图上传控件
        me.initEditor(); //初始化编辑器
      });
    },
    methods: {
      //初始化基本信息
      getSendArticleData: function(){
        const me = this;
        $.ajax({
          type: 'POST',
          url: '/myArticle/getSendArticleData',
          data: {},
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.sysMenuList = data.sysMenuList;
              me.logoTitle = data.logoTitle;
              me.indexFooter = data.indexFooter;
              me.tagList = data.tagList;
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
            me.isLoad_1 = true;
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //发布文章
      save: function(){
        const me = this;

        //设置编辑器内容
        me.articleForm.content = me.editor.txt.html();

        //设置图片名记录
        me.articleForm.imgName = me.articleForm.imgName.toString();

        //设置图片大小记录
        me.articleForm.imgSize = me.articleForm.imgSize.toString();

        //获取选中的标签
        var boTagArr = [];
        $('input[type=checkbox]:checked').each(function() {
          boTagArr.push($(this).val());
        });
        //设置标签的值
        me.articleForm.boTagArr = boTagArr.toString();

        if(boTagArr.toString() == '' || boTagArr.toString() == undefined || boTagArr.toString() == null){
          layer.msg("请选择标签", {icon:2, anim:6});
          return false;
        }

        if(me.articleForm.title == '' || me.articleForm.title == undefined || me.articleForm.title == null){
          layer.msg("标题不能为空", {icon:2, anim:6});
          return false;
        }

        if(me.articleForm.content.length < 50){
          layer.msg("内容不能少于50字", {icon:2, anim:6});
          return false;
        }

          if(me.articleForm.content.length > 10000){
              layer.msg("内容不能多于10000字", {icon:2, anim:6});
              return false;
          }

        var loadIndex = layer.load(2);
        $.ajax({
          type: 'POST',
          url: '/myArticle/save',
          data: me.articleForm,
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.close(loadIndex);
                layer.msg(data.message, {icon:1});
                setTimeout(function(){location.reload()}, 1500);
              });
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.close(loadIndex);
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.close(loadIndex);
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //封面图上传
      uploadInst: function(){
        const me = this;
        layui.use('upload', function(){
          var upload = layui.upload;
          var uploadImg = upload.render({
            elem: '#imgBtn'
            ,url: '/myArticle/uploadArticleImg' //改成您自己的上传接口
            ,accept: 'images'
            ,before: function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#article_image').attr('src', result); //图片链接（base64）
              });
            }
            ,done: function(res){
              //上传成功
              if(res.state == "200"){
                me.articleForm.img = res.fileName; //图片路径
                return layer.msg(res.message, {icon:1});
                //如果上传失败
              }else{
                return layer.msg(res.message, {icon:2});
              }
            }
            ,error: function(){
              //演示失败状态，并实现重传
              var demoText = $('#article_image_text');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs head-reload">重试</a>');
              demoText.find('.head-reload').on('click', function(){
                uploadImg();
              });
            }
          })
        });
      },

      //编辑器
      initEditor: function () {
        const me = this;
        //编辑器
        var E = window.wangEditor;
        me.editor = new E('#editorContent');
        me.editor.customConfig.uploadImgServer = "/myArticle/uploadImg"; //图片上传地址
        me.editor.customConfig.uploadFileName = 'image';
        me.editor.customConfig.pasteFilterStyle = false;
        me.editor.customConfig.uploadImgMaxLength = 5; //一次最多上传图片数量
        me.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
        me.editor.customConfig.uploadImgHooks = {
          // 上传超时
          timeout: function (xhr, editor) {
            layer.msg('上传超时！')
          },
          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          customInsert: function (insertImg, result, editor) {
            if (result.state == "200") {
              var url = result.url;
              var imgItem = result.imgName;
              var imgSizeItem = result.imgSize;
              url.forEach(function (e) { //遍历显示预览图
                insertImg(e);
              });
              imgItem.forEach(function (e) { //遍历保存图片名
                me.articleForm.imgName.push(e);
              });
              imgSizeItem.forEach(function (e) { //遍历保存大小
                me.articleForm.imgSize.push(e);
              })
            } else {
              layer.msg(result.message);
            }
          }
        };
        me.editor.customConfig.customAlert = function (info) {
          layer.msg(info);
        };
        me.editor.create();
      }
    }
  });
</script>
</html>
